<template>
	<view class="system">
		<view class="itemBox">
			<view class="lable">
				昵称
			</view>
			<input class="inputitem" v-model="nickname" type="text" placeholder="请输入昵称" />
		</view>
		<view class="itemBox">
			<view class="lable">
				头像
			</view>
			<view class="" style="display: flex;align-items: center;" @click="handleUploadImg">
				<image v-if="avatar==null"
					src="https://img0.baidu.com/it/u=1429435380,946942033&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
					style="width: 60rpx;height: 60rpx;border-radius: 60rpx;" mode=""></image>
				<image v-else :src="avatar" style="width: 60rpx;height: 60rpx;border-radius: 60rpx;" mode=""></image>
				<image src="../../static/image/right.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
			</view>
		</view>
		<view class="itemBox">
			<view class="lable">
				电话
			</view>
			<input class="inputitem" v-model="mobile" type="text" placeholder="请输入电话" />
		</view>
		<view class="itemBox" @click="timeShow=true">
			<view class="lable">
				生日
			</view>
			<view class="" style="display: flex;align-items: center;font-size: 28rpx;color: #888888;">
				<view :class="birthday!=null ?'color_B' :''">
					{{birthday==null?'请选择生日':birthday}}
				</view>
				<image src="../../static/image/right.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
			</view>

		</view>
		<view class="itemBox" @click="handleUpdate">
			<view class="lable">
				修改密码
			</view>
			<image src="../../static/image/right.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
		</view>
		<view class="itemBox" @click="handleFeedback">
			<view class="lable">
				反馈中心
			</view>
			<image src="../../static/image/right.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
		</view>
		<view class="itemBox" @click="handleAboutus">
			<view class="lable">
				关于我们
			</view>
			<image src="../../static/image/right.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
		</view>
		<view class="itemBox" @click="handleCancatus">
			<view class="lable">
				联系我们
			</view>
			<image src="../../static/image/right.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
		</view>
		<view class="itemBox" @click="handleHelpCenter">
			<view class="lable">
				帮助中心
			</view>
			<image src="../../static/image/right.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
		</view>

		<view class="btnBottom">
			<view class="btn btns" @click="handleSave">
				保存
			</view>
			<view class="btn" style="margin-top: 20rpx;" @click="delshow = true">
				退出登录
			</view>
		</view>


		<u-datetime-picker :show="timeShow" mode="date" @cancel="timeShow=false" @confirm="confirmStarttime"
			:closeOnClickOverlay="true" @close="timeShow=false" :minDate="1571647885"
			:maxDate="value1"></u-datetime-picker>


		<u-modal :show="delshow" :title="title" :showCancelButton="true" @confirm="handleEdit" @cancel="delshow = false"
			confirmColor="#439B05"></u-modal>
	</view>
</template>

<script>
	import {
		edituser,
		uploadImg,
		userinfo
	} from "@/api/api.js"
	export default {
		data() {
			return {
				nickname: "",
				avatar: null,
				mobile: "",
				birthday: "",
				timeShow: false,
				value1: Number(new Date()),
				title: "确定要退出登录吗？",
				delshow: false,
			}
		},
		onLoad() {
			this.handleuserinfo()
		},
		methods: {
			async handleuserinfo() {
				let res = await userinfo()
				this.nickname = res.data.nickname
				this.mobile = res.data.mobile
				this.birthday = res.data.birthday
				this.avatar = res.data.avatar
			},
			handleUploadImg() {
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log("tempFilePaths", tempFilePaths)
						uni.uploadFile({
							url: uploadImg, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								// console.log("图片路径//////", JSON.parse(uploadFileRes.data).data);
								that.avatar = JSON.parse(uploadFileRes.data).data
								// console.log("that.imgs", that.imgs);
							},
							fail(e) {
								console.log("上传图片", e)
							}
						});
					}
				});
			},

			confirmStarttime(e) {
				// console.log("333",e)
				let date = new Date(e.value)
				let dateString = date.toLocaleDateString()
				this.birthday = dateString
				this.timeShow = false
				// console.log("44",dateString)

			},

			async handleSave() {
				if (this.nickname == '') {
					uni.showToast({
						title: '请输入昵称！',
						icon: "none",
						duration: 2000
					});
					return
				}
				if (this.birthday == '') {
					uni.showToast({
						title: '请选择出生日期！',
						icon: "none",
						duration: 2000
					});
					return
				}
				let data = {
					nickname: this.nickname,
					avatar: this.avatar,
					birthday: this.birthday
				}
				let res = await edituser(data)
				if (res.code == 1000) {
					this.handleuserinfo()
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 2000
					});
				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 2000
					});
				}
			},
			handleUpdate() {
				uni.navigateTo({
					url: "./uploadPassword"
				})
			},
			handleAboutus() {
				uni.navigateTo({
					url: "./aboutUs"
				})
			},
			handleFeedback() {
				uni.navigateTo({
					url: "./feedCenter"
				})
			},
			handleCancatus() {
				uni.navigateTo({
					url: "./concatUs"
				})
			},
			
			handleHelpCenter(){
				uni.navigateTo({
					url: "./helpCenter"
				})
			},

			handleEdit() {
				uni.removeStorageSync("token")
				uni.reLaunch({
					url: "/pages/login/index"
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.color_B {
		color: #000000;
	}

	.btnBottom {
		width: 100%;
		padding: 30rpx;
		background-color: #ffffff;
		position: fixed;
		bottom: 0;

		.btn {
			width: 670rpx;
			height: 80rpx;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			opacity: 1;
			border: 2rpx solid #439B05;
			border-radius: 100rpx;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #439B05;
			line-height: 80rpx;
			text-align: center;
		}

		.btns {
			background-color: #439B05;
			color: #ffffff;
		}
	}

	.itemBox {
		background-color: #ffffff;
		margin-bottom: 1rpx;
		display: flex;
		padding: 30rpx;
		justify-content: space-between;
		text-align: right;

		.lable {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 40rpx;
		}

		.inputitem {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
		}
	}
</style>